<template>
  <div class="canvas">
    <canvas :id="id" width="160" height="160"></canvas>
  </div>
</template>

<script>
  export default {
    name: 'canvas1',
    data () {
      return {

      }
    },
    props: ['precent', 'id'],
    watch: {
      precent () {
        this.draw()
      }
    },
    methods: {
      draw () {
        let pi = Math.PI
        let canvas = document.getElementById(this.id)
        let ctx = canvas.getContext('2d')
        ctx.clearRect(0, 0, 200, 200)
        ctx.lineWidth = 16 // 外层外环的宽度
        ctx.lineCap = 'butt' // 绘制线条末端线帽的样式 butt向线条的每个末端添加平直线帽 round是圆形 square是正方形
        ctx.strokeStyle = '#e6e6e6' // 填充背景颜色
        ctx.textAlign = 'center' // 文字居中

        // 底色环  最外曾圆环
        let backStart = (40 / 360) * pi * 2 + pi / 2  // 开始角度是30度 + 90 因为是从最右边开始的
        let backEnd = (320 / 360) * pi * 2 + pi / 2  //  结束角度
        ctx.beginPath()
        ctx.arc(80, 80, 60, backStart, backEnd, false) // 圆心是100 100 半径是80 开始角度 结束角度  顺时针还是逆时针
        ctx.stroke()
        ctx.closePath()
        // 红色圆环
        ctx.strokeStyle = '#ed7b7b'
        let redEnd = this.precent * (280 / 360) * pi * 2 + backStart // 红色结束角度
        ctx.beginPath()
        ctx.arc(80, 80, 60, backStart, redEnd, false)
        ctx.stroke()
        ctx.closePath()
        // 绘制中心圆 灰色圆
        ctx.beginPath()
        ctx.fillStyle = '#e6e6e6'
        ctx.arc(80, 80, 35, 0, pi * 2, false)
        ctx.fill()
        ctx.closePath()
        // 计算指向顶点坐标
        let arclength = 45 // 三角的箭头距离圆心的距离
        let x = arclength * Math.cos(redEnd) + 80 // 三角的横坐标
        let y = arclength * Math.sin(redEnd) + 80 // 三家的纵坐标
        ctx.lineWidth = '1'
        ctx.beginPath()
        ctx.moveTo(x, y) //  以三角的的定点为开始位置 画一条到圆心的线
        ctx.lineTo(80, 80)
        ctx.stroke()
        ctx.closePath()
        // 指向圆弧
        let rad = redEnd - pi
        let radStart = rad - (20 / 360) * pi * 2
        let radEnd = rad + (20 / 360) * pi * 2
        ctx.fillStyle = '#ed7b7b'
        ctx.beginPath()
        ctx.arc(x, y, 45, radStart, radEnd, false)
        ctx.lineTo(x, y)
        ctx.fill()
        ctx.closePath()
        // 绘制中心圆
        ctx.beginPath()
        ctx.arc(80, 80, 28, 0, pi * 2, false)
        ctx.fill()
        ctx.closePath()
        // 绘制文字
        ctx.beginPath()
        ctx.font = '16px Courier New'
        ctx.fillStyle = '#fff'
        ctx.fillText('77.9%', 80, 85)
        ctx.closePath()
        // 坐标系
//        ctx.strokeStyle = 'black'
//        ctx.beginPath()
//        ctx.moveTo(0, 100)
//        ctx.lineTo(200, 100)
//        ctx.stroke()
//        ctx.closePath()
//        ctx.beginPath()
//        ctx.moveTo(100, 0)
//        ctx.lineTo(100, 200)
//        ctx.stroke()
//        ctx.closePath()
      }
    },
    mounted () {
      this.draw()
    }
  }
</script>

<style lang="stylus" scoped>
  .canvas
    width 170px
    height 160px
    float left
</style>
